<template>
	<view class="baidu-link-components">
		
		<!-- header -->
		<view class="header-warp">
			相关链接
		</view>
		
		<!-- 链接地址 -->
		<view class="src-warp term">
			<text class="title">链接地址：</text>
			<text class="src" selectable="true"  @click="goToWed()">{{src}}</text>
		</view>
		
		<!-- 链接提取码 -->
		<view class="key-warp term">
			<view class="title">
				<text>链接提取码：<text>{{extractionCode}}</text></text>
				<view class="icon" @click="copyExtractionCode()"></view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {

		name: "baidu_link",

		props: {
			// 百度网盘链接
			src: String,
			// 百度网盘链接提取码
			extractionCode: String,
			// wed页路径地址
			targetSrc: String
		},

		methods: {
			// 验证码复制到剪切板
			copyExtractionCode() {
				uni.setClipboardData({
					data: this.extractionCode,
					success: function() {
						uni.showToast({
							icon: 'none',
							title: '复制提取码成功',
						});
					}
				});
			},
			
			// 跳转-wed页
			goToWed() {
				uni.navigateTo({
					url: this.targetSrc + '?src=' + this.src,
					success() {
						
					},
					fail(err) {
						console.log(err)
					}
				});
			}
		},

	}
</script>

<style lang="scss" scoped>
	.baidu-link-components {

		.term {
			margin-bottom: 20rpx;

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-weight: bold;

				.icon {
					width: 36rpx;
					height: 36rpx;
					margin-right: 20rpx;
					background-image: url(./copy.png);
					background-size: 100% 100%;
				}
			}

			&>view {
				margin-top: 10rpx;
			}
		}

		.header-warp {
			padding: 10rpx 0;
			font-size: 34rpx;
			text-align: center;
			font-weight: bold;
		}

		.src-warp {
			.src {
				color: #5280ff;
				text-decoration: underline;
				word-break: break-all;
			}
		}

	}
</style>
